<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">选择发布类型</view>

    <!-- 选项列表 -->
    <view class="options">
      <button
        class="option-btn publish-product"
        @click="handlePublishProduct"
      >
        发布商品
      </button>
      <button
        class="option-btn publish-article"
        @click="navigateTo('publishArticle')"
      >
        发布文章
      </button>
      <button
        class="option-btn create-shop"
        @click="navigateTo('createShop')"
      >
        新建店铺
      </button>
    </view>
  </view>
</template>

<script>
import { getShopDetail } from '../../../api/shop/index.js';

export default {
  data() {
    return {
      userId: null,
      paths: {
        publishProduct: '/pages/product/add/add', // 发布商品页面路径
        publishArticle: '/pages/plant/article/add', // 发布文章页面路径
        createShop: '/pages/shop/add/add', // 新建店铺页面路径
      },
    };
  },
  onLoad() {
    // 获取用户信息
    if (!this.userId) {
      this.$store
        .dispatch('GetInfo')
        .then(() => {
          this.userId = this.$store.state.user.userId;
          console.log('用户ID:', this.userId);
        })
        .catch((error) => {
          console.error('获取用户信息失败:', error);
        });
    }
  },
  methods: {
    // 跳转方法
    navigateTo(option) {
      const targetPath = this.paths[option];
      if (targetPath) {
        uni.navigateTo({
          url: targetPath,
        });
      } else {
        uni.showToast({
          title: '路径错误，请检查配置',
          icon: 'error',
        });
      }
    },
    // 处理发布商品逻辑
    async handlePublishProduct() {
      try {
        const shopDetail = await getShopDetail(this.userId);
        if (!shopDetail) {
          uni.showToast({
            title: '请先创建店铺',
            icon: 'none',
          });
          // 跳转到新建店铺页面
          setTimeout(() => {
            this.navigateTo('createShop');
          }, 1000); // 延迟1秒后跳转
        } else {
          // 用户有店铺，正常跳转到发布商品页面
          this.navigateTo('publishProduct');
        }
      } catch (error) {
        console.error('获取店铺信息失败:', error);
        uni.showToast({
          title: '获取店铺信息失败，请稍后重试',
          icon: 'none',
        });
      }
    },
	
	 async navigateTo(option) {
	    if (option === 'createShop') {
	      try {
	        const shopDetail = await getShopDetail(this.userId);
	        if (shopDetail) {
	          // 提示用户已有店铺，阻止跳转
	          uni.showToast({
	            title: '您已拥有店铺',
	            icon: 'none',
	          });
	          return; // 阻止跳转
	        }
	      } catch (error) {
	        console.error('检查店铺信息失败:', error);
	        uni.showToast({
	          title: '获取店铺信息失败，请稍后重试',
	          icon: 'none',
	        });
	        return; // 遇到错误时也阻止跳转
	      }
	    }
	
	    // 正常跳转逻辑
	    const targetPath = this.paths[option];
	    if (targetPath) {
	      uni.navigateTo({
	        url: targetPath,
	      });
	    } else {
	      uni.showToast({
	        title: '路径错误，请检查配置',
	        icon: 'error',
	      });
	    }
		}
  },
};
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 100vh; /* 保证页面内容居中 */
}

.header {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%; /* 选项区域宽度填满 */
}

/* 公共按钮样式 */
.option-btn {
  width: 100%; /* 按钮宽度占满父容器 */
  height: 80px;
  color: white;
  font-size: 20px;
  text-align: center;
  line-height: 80px; /* 与按钮高度一致，垂直居中 */
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-size: 200%; /* 渐变色的平滑过渡 */
  transition: background-position 0.3s ease-in-out;
}

/* 不同按钮渐变颜色 */
.publish-product {
  background: linear-gradient(90deg, #007aff, #8741ff); /* 蓝色渐变 */
}

.publish-article {
  background: linear-gradient(90deg, #34c759, #0fb0b8); /* 绿色渐变 */
}

.create-shop {
  background: linear-gradient(90deg, #ff9500, #ff0000); /* 橙色渐变 */
}

/* 鼠标悬停效果 */
.option-btn:hover {
  background-position: right;
}
</style>
